import React, { useState, useEffect, useCallback } from 'react';
import NavBar from '@/components/navBar/NavBar';
import { useHistory, useParams } from 'react-router-dom';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts'
import { useSelector, useDispatch } from 'react-redux';
import Cart from './components/Cart';
import Record from './components/Record';
import BSScroll from '@/components/bsScroll/BSScroll';
import Top from './components/Top';
const Detail = () => {
    const data = useSelector(state => state.getIn(['monitoring', 'data']))
    const param = useParams();
    const dispatch = useDispatch();
    const [state, setState] = useState({});
    const getState = useCallback((type) => {
        switch (type) {
            case "weight": return { title: "体重", unit: 'Kg' };
            case "bloodSugar": return { title: "血糖", unit: 'mmol/L' };
            case "bloodPressure": return { title: "血压", unit: 'mmHg' };
            case "heartRate": return { title: "心率", unit: 'bmp' }
            default: return { title: "心率", unit: 'bmp' }
        }
    }, [])
    useEffect(() => { setState(getState(param.type)) }, [param.type, getState])
    useEffect(() => {
        dispatch({
            type: 'loadDataSagaMonitoring',
            dataType: param.type
        })
    }, [dispatch, param.type])
    

    const history = useHistory();
    const backHandler = useCallback(() => {
        history.push('/My/monitoring');
    }, [history]);
    const changeHandler = useCallback((key) => {
        return () => {
            console.log(key);
            const value = window.prompt("修改数据")
            dispatch({
                type: 'changeDataMonitoring',
                key: key,
                value: value
            });
            console.log(data.getIn(['data', key]));
            dispatch({
                type: 'setLoadDataMonitoring',
                dataType: param.type,
                data: data.getIn(['data'])
            })
        }
    }, [data, dispatch, param.type]);
    const delHandler = useCallback((value) => {

        return () => {
            dispatch({
                type: 'delDataSagaMonitoring',
                dataType: param.type,
                key: value
            });
            dispatch({
                type: 'setLoadDataMonitoring',
                dataType: param.type,
                data: data.getIn(['data'])
            })
            console.log(data.getIn(['data']));
        }
    }, [data, dispatch, param.type]);
    const addHandler=useCallback(()=>{
        const key = window.prompt("新增数据","在这里输入日期(月/日)");
        const value = window.prompt("新增数据", "在这里输入体重(单位千克)")
        if (!key || !value) return;
        if (isNaN(Number(value))) {alert('数据错误！');return;}
        dispatch({
            type: 'changeDataMonitoring',
            key: key,
            value: value
        });
        console.log(data.getIn(['data', key]));
        dispatch({
            type: 'setLoadDataMonitoring',
            dataType: param.type,
            data: data.getIn(['data'])
        })
    }, [data, dispatch, param.type])
    const [option, setOption] = useState({});
    useEffect(() => {
        setOption({
            xAxis: {
                type: 'category',
                data: Object.keys(data.getIn(['data']))
            },
            yAxis: {
                type: 'value',
                show: false
            },
            grid: {
                top: '10%',
                left: '2%',
                right: '5%',
                bottom: '0%',
                containLabel: false,
                height: '230px'
            },
            series: [{
                data: Object.values(data.getIn(['data'])),
                type: "line",
                smooth: true,
                itemStyle: {
                    normal: {
                        color: '#00c1de',
                        shadowBlur: 8,
                        shadowColor: '#25d5f0',
                        borderColor: '#00c1de',
                        borderWidth: 2,
                        backgroundColor: 'transparent'
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#00D1de'
                        }, {
                            offset: 1,
                            color: '#FFF'
                        }]),
                    }


                },
                label: {
                    show: true,
                    position: 'top'
                },
                emphasis: {
                    focus: 'series'
                },

            }]
        })
    }, [data])
    return (
        <>
            <NavBar
                title={data.getIn(['title'])}
                leftArrow={true}
                clickLeft={backHandler}
            ></NavBar>
            <BSScroll
                id="monitoring_scroll"
                height="calc(100vh - .46rem)"
            >
                <Top title={state.title} unit={state.unit}
                    value={data.getIn(['data'])[Object.keys(data.getIn(['data'])).pop()]}
                    click={addHandler}
                    bgColor='#6C76F4'
                >
                    
                </Top>
                <Cart title={state.title} unit={state.unit}>
                    <ReactECharts
                        option={option}
                    ></ReactECharts>
                </Cart>
                <p style={{ marginLeft: ".4rem", width: '100vw' }}>
                    {state.title + "记录"}
                </p>


                {
                    Object.keys(data.getIn(['data'])).reverse().map(item => {
                        return (
                            <Record
                                year='2021'
                                date={item}
                                value={data.getIn(['data'])[item]}
                                unit={data.getIn(['unit'])}
                                changeClick={changeHandler(item)}
                                delClick={delHandler(item)}
                                standard={data.getIn(['standard'])}
                                key={item}
                            >

                            </Record>
                        )
                    })
                }

            </BSScroll>
        </>
    );
}

export default Detail;
